<template>
  <el-col class="bill">
    <el-col class="title">出库管理</el-col>
    <el-col class="tabs">
      <div
        :class="inventory === '成品' ? 'current' : ''"
        @click="handleClick('成品')"
      >
        成品
      </div>
      <div
        :class="inventory === '茶叶' ? 'current' : ''"
        @click="handleClick('茶叶')"
      >
        茶叶
      </div>
      <div
        :class="inventory === '礼盒' ? 'current' : ''"
        @click="handleClick('礼盒')"
      >
        礼盒
      </div>
    </el-col>
    <el-col class="search">
      <el-input
        placeholder="输入商品名称"
        suffix-icon="el-icon-search"
        v-model="name"
      ></el-input>
      <el-date-picker
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-model="dateTime"
        @change="pickerChange"
      >
      </el-date-picker>
      <el-button type="primary" @click="get_saleList">搜索</el-button>
    </el-col>

    <el-col class="controls">
      <div @click="goto_sale">新增出库</div>
      <div @click="get_collect">出库汇总</div>
    </el-col>

    <el-table :data="productList" border stripe size="small">
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <div class="class_bottom">
      <el-pagination
        @current-change="handleCurrent"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="出库汇总"
      :visible.sync="collectShow"
      :modal-append-to-body="false"
      width="64%"
      center
    >
      <div>
        <div class="search">
          <el-input
            placeholder="输入商品名称"
            suffix-icon="el-icon-search"
            size="mini"
            v-model="good_name"
          ></el-input>
          <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            v-model="collect_dateTime"
            @change="pickerChanges"
          >
          </el-date-picker>
          <el-button type="primary" size="mini" @click="get_collectList"
            >搜索</el-button
          >
        </div>
        <el-table :data="collectList" border stripe size="mini">
          <el-table-column
            v-for="col in collect_columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <div class="derive">
          <el-button type="primary" size="mini" @click="handledErive"
            >导出</el-button
          >
        </div>
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      inventory: "成品",
      productList: [],
      total: 0,
      page: 1,
      name: "",
      start: "",
      end: "",
      dateTime: "",
      good_name: "",
      collect_start: "",
      collect_end: "",
      collect_dateTime: "",
      collectShow: false,
      columns: [
        {
          id: "id",
          label: "序号",
          width: "80",
        },
        {
          id: "name",
          label: "商品名称",
          width: "",
        },
        {
          id: "number",
          label: "出库数量",
        },
        {
          id: "out_time",
          label: "出库时间",
        },
        {
          id: "money",
          label: "金额",
        },
        {
          id: "info",
          label: "备注",
        },
      ],
      collectList: [],
      collect_columns: [
        {
          id: "index",
          label: "序号",
          width: "80",
        },
        {
          id: "class",
          label: "商品分类",
          width: "",
        },
        {
          id: "name",
          label: "商品名称",
          width: "",
        },
        {
          id: "totalOutNum",
          label: "出库总数量",
        },
        {
          id: "totalOutMoney",
          label: "出库总金额",
        },
      ],
      headers: {},
    };
  },
  mounted() {
    this.get_saleList();
  },
  methods: {
    handleClick(tab) {
      this.inventory = tab;
      this.page = 1;
      this.name = "";
      this.start = "";
      this.end = "";
      this.get_saleList();
    },
    pickerChange(value) {
      this.start = value ? this.getTime(value[0]) : "";
      this.end = value ? this.getTime(value[1]) : "";
    },
    pickerChanges(value) {
      this.good_start = value ? this.getTime(value[0]) : "";
      this.good_end = value ? this.getTime(value[1]) : "";
    },
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      return year + "-" + month + "-" + day;
    },
    goto_sale() {
      this.$router.push({
        path: "/home/addSale",
      });
    },
    get_collect() {
      this.collect_page = 1;
      this.good_name = "";
      this.collect_start = "";
      this.collect_end = "";
      this.collectShow = true;
      this.get_collectList();
    },
    handleCurrent(val) {
      this.page = val;
      this.get_saleList();
    },
    async get_saleList() {
      let data = {
        name: this.name,
        class: this.inventory,
        start: this.start,
        end: this.end,
        page: this.page,
      };
      let res = await this.$store.dispatch("crm_goodOutList", data);
      if (!res.code) {
        this.total = res.data.total;
        this.productList = res.data.data;
      }
    },
    async get_collectList() {
      let data = {
        class:this.inventory,
        name: this.good_name,
        start: this.start,
        end: this.end,
        type: "select",
      };
      let res = await this.$store.dispatch("crm_goodOutSummary", data);
      if (!res.code) {
        this.collectList = res.data;
      }
    },
    handledErive() {
      let header = sessionStorage.getItem("user");
      let headers = JSON.parse(header);
      if (headers) {
        this.headers["X-Access-Token"] = headers.token;
        this.headers["X-Access-Uid"] = headers.id;
      }
      axios.post("/api/admin/crm_goodOutSummary",
          {
            class:this.inventory,
            name: this.good_name,
            start: this.start,
            end: this.end,
            type: "out",
          },
          {
            headers: this.headers,
            responseType: "blob",
          }
        )
        .then((res) => {
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });

          const link = document.createElement("a");
          link.download = "出库汇总.xlsx";
          link.href = URL.createObjectURL(blob);
          link.target = "_blank";
          document.body.appendChild(link);
          link.click();
          //释放URL对象
          URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" >
.bill {
  padding: 30px;
  text-align: left;

  .tabs {
    display: flex;
    align-items: center;
    border-bottom: #999999 solid 1px;

    div {
      padding: 30px;
      color: #333333;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }

    .current {
      padding: 30px 30px 26px;
      border-bottom: #339ef9 solid 4px;
    }
  }

  .search {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 20px 0;

    .el-input,
    .el-date-editor {
      width: 46%;
    }
  }

  .controls {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    div {
      background-color: #409eff;
      background-image: none;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
      color: #ffffff;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .derive {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>